<template>
	<view class="u-flex u-p-40 warp" style="height: calc(100vh - 50px)">
		<view v-show="!loading">
			<view v-if="start && question != null" class="question u-row-between">
				<view>
					<view class="title u-font-xl">
						请答题
						<text class="u-m-l-30 u-font-xs" v-show="resText" :style="{color: resColor}">
							{{ resText }}
						</text>
					</view>
					<u-line class="u-m-t-20 u-m-b-20" />
					<view class="title">{{ questionText }}</view>
					<scroll-view v-if="answered" scroll-y="true" style="max-height: calc(60vh - 200px);"
						class="u-m-t-50 u-m-b-50" v-show="1">
						<view class="u-text-center">
							<text class="u-font-xl">
								<b>{{ question.poem.title }}</b>
							</text><br>
							<view class="u-font-xs u-m-t-10 u-m-b-20 u-tips-color">
								{{ question.poem.author }}
							</view>
							<view v-html="question.poem.content_html"></view>
						</view>
					</scroll-view>
				</view>
				<view class="u-flex u-row-between">
					<u-button v-if="!answered" @click="play(question.record)" size="mini" :plain="true" type="success"
						:ripple="true">
						重新播放
					</u-button>
					<u-button v-if="!answered" @click="recordAction" size="mini" :plain="true" type="primary"
						:ripple="true">
						开始答题
					</u-button>
					<u-button v-if="answered" @click="play(question.poem.record)" size="mini" :plain="true"
						type="warning" :ripple="true">
						朗诵全诗
					</u-button>
					<u-button v-if="answered" @click="getData" size="mini" :plain="true" type="primary" :ripple="true">
						下一题
					</u-button>
				</view>
				<!-- <audio controls="true" src="/static/test.mp3" autoplay="autoplay"></audio> -->
			</view>
			<u-button v-else @click="startAction" :plain="true" class="start" type="success">开始答题</u-button>
		</view>
		<u-mask :show="loading">
			<view class="warp">
				<u-loading color="red" size="100" mode="flower"></u-loading>
			</view>
		</u-mask>
		<u-toast ref="uToast" />
		<u-action-sheet :mask-close-able="false" @click="sheetSubmit" @close="sheetClose" :tips="tips"
			:list="actionList" v-model="recording">
		</u-action-sheet>
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	import {
		questionApi,
		RecordPath,
		anwserApi,
	} from '../api.js'
	export default {
		data() {
			return {
				// 开始答题
				start: false,
				// 加载中
				loading: false,
				// 播放中
				playing: false,
				// 录音中
				recording: false,
				// 已回答
				answered: false,
				// 是否允许上传
				allowUpload: false,
				tips: {
					text: '录音中...',
					color: '#909399',
					fontSize: 24
				},
				actionList: [{
					text: '提交'
				}],
				question: null,
				resText: '',
				resColor: null,
				// 没题了
				noQeustion: false,
			};
		},
		onLoad() {
			this.listenRecord()
		},
		computed: {
			questionText() {
				if (this.question.type == 0) {
					return `"${this.question.first}"，请背诵下句。`
				} else {
					return `"${this.question.second}"，请背诵上句。`
				}
			}
		},
		methods: {
			getData() {
				this.loading = true
				questionApi()
					.then(res => {
						this.loading = false
						if (res == null) {
							this.$refs.uToast.show({
								title: '没题了，，，，',
								position: "top",
							});
							return 
						} else {
							this.start = true
							this.question = res
							this.answered = false
							this.resText = ''
							this.resColor = ''
							setTimeout(() => {
								this.play(res.record, true)
							}, 500)
						}
					})
					.catch(e => {
						this.loading = false
					})
			},
			startAction() {
				this.getData()
			},
			errorAudio() {
				this.play('record/error.mp3', true)
			},
			successAudio() {
				this.play('record/success.mp3', true)
			},
			/**
			 * 播放音频
			 */
			play(src, auto = false) {
				if (this.playing) {
					innerAudioContext.pause()
					this.playing = false
					return
				}
				if (!auto) {
					this.$refs.uToast.show({
						title: '再次点击即可暂停播放',
						position: "top",
					});
				}
				this.playing = true
				innerAudioContext.autoplay = true;
				innerAudioContext.src = RecordPath(src);
				innerAudioContext.onPlay(() => {});
				innerAudioContext.onEnded(() => {
					this.playing = false
				})
				innerAudioContext.onError((res) => {
					this.$refs.uToast.show({
						title: res.errMsg,
						position: "top",
					});
				});
			},
			/**
			 * 保存录音
			 */
			listenRecord() {
				let self = this
				recorderManager.onStop(function(res) {
					if (!self.allowUpload) return
					self.loading = true
					anwserApi(res.tempFilePath, {
							question_id: self.question.id,
						})
						.then(res => {
							self.loading = false
							self.answered = true
							if (res.error) {
								self.$refs.uToast.show({
									title: res.msg,
									position: "top",
								});
								self.resText = res.msg
								self.resColor = '#DD6161'
							} else {
								let msg
								if (res.success == 1) {
									self.successAudio()
									self.resText = '回答正确'
									self.resColor = '#18B566'
								} else if (res.success == 2) {
									self.errorAudio()
									self.resText = '回答错误'
									self.resColor = '#DD6161'
								}
								self.$refs.uToast.show({
									title: self.resText,
									position: "top",
								});
							}
						})
						.catch(e => {
							self.loading = false
						})
				});
			},
			/**
			 * 开始录音
			 */
			recordAction() {
				if (this.recording) return
				this.recording = true
				this.allowUpload = false
				recorderManager.start({
					format: 'mp3',
					sampleRate: 16000
				})
			},
			/**
			 * 上传录音
			 */
			sheetSubmit() {
				this.allowUpload = true
				recorderManager.stop();
			},
			sheetClose() {
				this.allowUpload = false
				recorderManager.stop();
			}
		},
	};
</script>

<style lang="scss" scoped>
	.row {
		width: calc(100vw - 40px);
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.question {
		width: calc(100vw - 80px);
		height: 60vh;
		border: 2px solid #ccc;
		border-radius: 20px;
		display: flex;
		flex-direction: column;
		flex: auto 1;
		padding: 30px 20px;
	}

	.rect {
		width: 120px;
		height: 120px;
		background-color: #fff;
	}
</style>
